<template>
	<scroll-view class="content" scroll-y>
		<view class="not_data" v-if="mockList.length==0">
			<i class="iconfont iconzanwukecheng"></i>
			<view class="not_data_text">当前暂无班级公告</view>
		</view>
		<block v-for="(item, index) in mockList" :key="index">
			<view @click="gotodetail(index)" class="container">
				<view class="flex-row">
					<view class="flex-row1">
						<view class="blue-line"></view>
						<view class="aaaa">{{item.notice_title}}</view>
						<view v-if="item.is_top" class="grid_r1_l1_top">置顶</view>
					</view>
					<view class="read" style="margin-top: 20upx;" :class="{ read2: item.state === 1 }">{{ item.state === 1 ? '未读' : '已读' }}</view>
				</view>
				<view class="flex-row flex-row2">
					<view class="read">发布人: {{ item.nicheng ? item.nicheng : '未设置昵称' }}</view>
					<view class="read">发布时间: {{ item.crate_time }}</view>
				</view>
				<!-- <view class="flex-row3">{{item.notice_text}}</view> -->
				<view class="flex-row3">
					<rich-text :nodes="item.text"></rich-text>
				</view>
			</view>
		</block>
		<uni-load-more v-if="mockList.length >= 6" :status="status" :content-text="contentText" />
	</scroll-view>
</template>

<script>
	import cDate from '@/common/util.js';
	export default {
		data() {
			return {
				groupid: '',
				mockList: [{
					notice_title: 'test',
					is_top: 1,
					state: 1,
					nicheng: 'zhangsan',
					crate_time: '2020',
					notice_text: 'hahhahahah'
				}],
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				}
			};
		},
		onPullDownRefresh() {
			this.getInfo();
			this.page = 1;
			this.reload = true;
			this.getClass();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getNoteList();
			}, 500);
		},
		onShow() {
			this.mockList = []
			this.getNoteList()
		},
		onLoad: function(e) {
			this.groupid = e.groupid;
		},
		onNavigationBarButtonTap: function() {
			uni.reLaunch({
				url: '../index/index'
			});
		},

		// 		onNavigationBarButtonTap: function(e) {
		//
		// 			var isgoto = false;
		// 			/**
		// 			 * 判断是否是创群者
		// 			 */
		// 			var userInfo = uni.getStorageSync('userInfo');
		// 			var groupData = uni.getStorageSync('groupData');
		// 			if (userInfo.mbid == groupData.creat_mbid) {
		// 				isgoto = true;
		// 			}
		// 			/**
		// 			 * 判断是否是管理员或创建者
		// 			 */
		// 			for (let i = 0; i < groupData.admin_mbid.length; i++) {
		// 				if (userInfo.mbid == groupData.admin_mbid[i]) {
		// 					isgoto = true;
		// 				}
		// 			}
		// 			if (isgoto) {
		//
		// 				uni.navigateTo({
		// 					url: 'edit-group-notice?groupid=' + this.groupid
		// 				});
		// 			} else {
		// 				uni.showToast({
		// 					title: '你没有该权限',
		// 					mask: false,
		// 					duration: 1500
		// 				});
		// 			}
		//
		// 		},
		methods: {
			gotodetail: function(index) {
				uni.navigateTo({
					url: 'group-notice-detail?data=' + encodeURIComponent(JSON.stringify(this.mockList[index]))
				});
			},
			getNoteList() {
				this.$zapi.apiPost('user/notice/listsNotice', {
					groupid: this.groupid,
					page: this.page,
					pagesize: 8
				}).then(res => {
					if (res.data.code == 200) {
						for (let i = 0; i < res.data.data.data.length; i++) {
							res.data.data.data[i].crate_time = cDate.getFormatTime(res.data.data.data[i].crate_time);
							var text = res.data.data.data[i].notice_text;
							text = text.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace('![](', '').replace(')![]', '');
							res.data.data.data[i].text = text;
						}
						this.mockList = this.mockList ? this.mockList.concat(res.data.data.data) : res.data.data.data;
					}
					this.status = 'noMore'
				});
			}
		}
	};
</script>

<style scoped>
	.not_data {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.not_data i {
		margin-top: 20upx;
		font-size: 400upx;
		line-height: 300upx;
		color: rgba(229, 229, 229, 1);
	}

	.not_data_text {
		color: #c2c2c2;
		font-size: 38upx;
		line-height: 60upx;

	}

	.aaaa {
		font-size: 40upx;
		max-width: 520upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #333333;
		position: relative;
	}

	.content {
		position: relative;
		height: 100%;
		width: 100%;
		background-color: #ffffff;
	}

	.container {
		height: auto;
		background-color: #ffffff;
		padding-top: 9upx;
		margin-bottom: 20upx;
		padding: 0 30upx;
		border-bottom: 1px solid #e5e5e5;
	}

	.blue-line {
		width: 4upx;
		height: 40upx;
		background: #ff9900;
		margin-right: 20upx;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 100upx;
	}

	.flex-row1 {
		width: 564upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20upx;
		font-size: 38upx;
		color: #333333;
	}

	.grid_r1_l1_top {
		font-size: 24upx;
		color: #f10000;
		position: absolute;
		left: 40upx;
		top: 80upx;
		bottom: 0;
		z-index: 9;
	}

	.read {
		font-size: 26upx;
		color: #999999;
	}

	.read2 {
		font-size: 26upx;
		color: #ff9900;
	}

	.flex-row2 {
		height: 62upx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-left: 20upx;
		font-size: 22upx;
		color: #999999;
		margin-top: 20upx;
		margin-bottom: 20upx;
	}

	.flex-row3 {
		width: 90%;
		height: auto;
		/* display: flex;
		flex-direction: row;
		align-items: center; */
		margin-left: 20upx;
		font-size: 33upx;
		color: #C0C0C0;
		padding-top: 10upx;
		padding-bottom: 10upx;
		overflow: scroll;
		white-space: nowrap;
	}

	view {
		font-size: 32upx;
	}
</style>
